import { defineComponent, defineProps, ref, onMounted, computed, renderSlot } from 'vue'
import Loading from '../loading'
import './index.scss'

export default defineComponent({
  name: 'TyButton',
  props: {
    type: String,
    loading: Boolean
  },
  setup(props, { slots, emit }) {
    // init
    onMounted(() => {})

    // state

    const typeClassCom = () => {
      return `ty-button ty-button-${props.type ? props.type : ''}`
    }

    return () => (
      <div class="ty-button-wrapper">
        <button class={typeClassCom()}>
          {/* Loading */}
          {props.loading ? (
            <span>
              <Loading style="margin-right:4px"></Loading>
            </span>
          ) : null}

          {/* Slots */}
          {renderSlot(slots, 'default')}
        </button>
      </div>
    )
  }
})
